<html>
	
	<LINK REL=StyleSheet HREF="theme.css" TITLE="">
	<script src="jquery-1.4.2.min.js"></script>
	<script src="menus.js"></script>
	<style>
		body{
			margin:0;
			padding:0;
			background:#333;
			font-family:"Helvetica Neue"
		}
		div {
			background:none;
		}
		#jqt ul.rounded {
			margin-top:5em;
			margin-bottom:5em;
		}
		#wrap{
			width:100%;
		}
		#left-side{
			width:500px;
			height:550px;
			overflow:scroll;
			float:left;
		}
		#right-side{
			float:left;
			height:800px;
			border-left:2px solid gray;
			padding:5px;
		}
		.rsbtn{
			width:100px;
			height:30px;
			border-top-left-radius: 8px 8px;
			border-top-right-radius: 8px 8px;
			border-bottom-right-radius: 8px 8px;
			border-bottom-left-radius: 8px 8px;
			font-size:2em;
			text-align:center;
			font-weight:bolder;
			margin:10px;
		}
		.item{
			width:400px;
			clear:both;
			background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4C4D4E), to(#404142));
			border-top-left-radius: 8px 8px;
			border-top-right-radius: 8px 8px;
			border-bottom-right-radius: 8px 8px;
			border-bottom-left-radius: 8px 8px;
			margin:10px;
			border-bottom: #555858;
			height:120px;
			padding:20px;
		}
		a{
			text-decoration:none;
		}
		.item .img{
			width:100px;
			float:left;
		}
		.item .img .price{
			text-align:center;
			font-size:1.5em;
		}
		.item .img img{
			width:90px;
			height:90px;
		}
		.item .info{
			height:auto;
			width:200px;
			float:left;
		}
		.additem{
			float:right;
			margin: 0;
			border-width: 0 5px;
			padding: 0 3px;
			width: auto;
			height: 30px;
			line-height: 30px;
			font-family: inherit;
			font-size: 12px;
			font-weight: bold;
			color: white;
			text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0;
			text-overflow: ellipsis;
			text-decoration: none;
			white-space: nowrap;
			background: none;
			-webkit-border-image: url(img/button.png) 0 5 0 5;
		}
		
		.menuitem{
			position:relative;
			width:300px;
			clear:both;
			border-top: 1px solid #333;
			border-bottom: #555858;
			list-style-type: none;
			padding: 10px 10px 10px 10px;
			background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4C4D4E), to(#404142));
			height:30px;
			padding:5px;
			margin : 10px;
			border-top-left-radius: 4px 4px;
			border-top-right-radius: 4px 4px;
			border-bottom-right-radius: 4px 4px;
			border-bottom-left-radius: 4px 4px;
			font-size:1.5em;
		}
		.menuitem .itemcancel{
			width:100%:
			height:100%;
		}
		.itemcancel-wrapper{
			position:absolute;
			right:5px;
			width:30px;
			height:30px;
			top:10px;
		}
	</style>
	<body>
		<script>
			function addItem(name,price,img,id){
				var html="<div class='item'>"
				html+="<div class='img'><img src='"+img+"'><div class='price'>"+price+"</div></div><div class='info'>"+name+"</div>";
				html+="<a href='javascript:addtoMenu("+id+")'><div class='additem'> ADD </div></a>"
				html+="</div>";
				$("#left-side").append(html);
			}
			
			function addtoMenu(item){
				var html="<div class='menuitem' id='"+item+"'>";
				html+=menus[item][0];
				html+="<div class='itemcancel-wrapper'><a href='#' onclick='cancelMenu(this)'><img class='itemcancel' src='img/cancel.png'/></a></div></div>";
				$("#right-side").append(html);
			}
			function cancelMenu(o){
				$(o).parents(".menuitem").remove();
			}
		</script>
		<div id="jqt" class="portrait">
			<div class="toolbar">
				<h1>Menu\Orders</h1>
			</div>
			<div id="wrap">
				<div id="left-side">
					
				</div>
				<div id="right-side">
					
				</div>
			</div>
		</div>
		<script>
			
			for(var i=0;i<menus.length;i++){
				var it=menus[i];
				addItem(it[0],it[2],it[1],i);
			}
		</script>
	</body>
</html>